<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图书管理</title>
    <!-- 引入Element UI的样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <style>
        .container {
            height: 98vh;
            overflow: hidden;
            display: flex;
            flex-direction: column;
        }

        .fixed-header {
            position: sticky;
            top: 0;
            background: white;
            z-index: 1000;
            padding-bottom: 10px;
            border-bottom: 1px solid #e0e0e0;
        }

        .fixed-footer {
            position: sticky;
            bottom: 0;
            background: white;
            z-index: 1000;
            padding: 10px;
            border-top: 1px solid #e0e0e0;
            display: flex;
            justify-content: center;
        }

        .content {
            flex: 1;
            overflow-y: auto;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .action-buttons {
            display: flex;
            gap: 8px;
        }

        .centered-table {
            width: 80%; /* 可以根据需要调整宽度 */
            overflow-y: unset; /* 禁用滚动 */
        }

        .el-dialog {
            position: relative;
            margin: 0 auto 50px;
            background: #FFF;
            border-radius: 2px;
            -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
            box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
            box-sizing: border-box;
            width: 43%;
        }
    </style>
</head>
<body>
<div id="app" class="container">
    <div class="fixed-header">
        <!-- 添加图书按钮与浏览借阅记录按钮 -->
        <div style="margin-bottom: 10px;">
            <el-button type="primary" @click="showAddBookDialog">添加图书</el-button>
            <el-button type="info" @click="showBorrowHistory">浏览借阅记录</el-button>
        </div>
        <!-- 搜索表单 -->
        <el-form :inline="true" :model="searchForm" class="demo-form-inline">
            <el-form-item label="作者">
                <el-input v-model="searchForm.author" placeholder="作者"></el-input>
            </el-form-item>
            <el-form-item label="分类">
                <el-input v-model="searchForm.category" placeholder="分类"></el-input>
            </el-form-item>
            <el-form-item label="图书ID">
                <el-input v-model="searchForm.id" placeholder="图书ID"></el-input>
            </el-form-item>
            <el-form-item label="ISBN">
                <el-input v-model="searchForm.isbn" placeholder="ISBN"></el-input>
            </el-form-item>
            <el-form-item label="图书名">
                <el-input v-model="searchForm.title" placeholder="图书名"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSearch">查询</el-button>
            </el-form-item>
        </el-form>
    </div>

    <div class="content">
        <!-- 分页结果展示 -->
        <div class="centered-table">
            <el-table :data="books" style="width: 100%" stripe height="600">
                <el-table-column prop="id" label="图书ID" width="180"></el-table-column>
                <el-table-column prop="title" label="图书名" width="180"></el-table-column>
                <el-table-column prop="copiesNumber" label="复本数" width="180"></el-table-column>
                <el-table-column prop="borrowedCopiesNumber" label="借出复本" width="180"></el-table-column>
                <el-table-column prop="borrowedNumber" label="借出次数" width="180"></el-table-column>
                <el-table-column label="操作" width="320">
                    <template slot-scope="scope">
                        <div class="action-buttons">
                            <el-button @click="showAddCopyDialog(scope.row)" type="primary" size="mini">添加复本
                            </el-button>
                            <el-button @click="editBook(scope.row)" type="success" size="mini">修改</el-button>
                            <el-button @click="removeBook(scope.row)" type="danger" size="mini">下架图书及复本
                            </el-button>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>

    <div class="fixed-footer">
        <!-- 分页组件 -->
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[10, 20, 50, 100]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
        </el-pagination>
    </div>

    <!-- 添加图书对话框 -->
    <el-dialog title="添加图书" :visible.sync="addBookDialogVisible">
        <el-form :model="addBookForm">
            <el-form-item label="图书名" :label-width="formLabelWidth" required>
                <el-input v-model="addBookForm.title" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="作者" :label-width="formLabelWidth" required>
                <el-input v-model="addBookForm.author" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="分类" :label-width="formLabelWidth" required>
                <el-input v-model="addBookForm.category" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="ISBN" :label-width="formLabelWidth" required>
                <el-input v-model="addBookForm.isbn" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="出版日期" :label-width="formLabelWidth">
                <el-input v-model="addBookForm.publishedDate" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="addBookDialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="submitAddBookForm">确 定</el-button>
        </div>
    </el-dialog>

    <!-- 添加复本对话框 -->
    <el-dialog title="添加复本" :visible.sync="dialogVisible">
        <el-form :model="addCopyForm">
            <el-form-item label="图书编号" :label-width="formLabelWidth">
                <el-input v-model="addCopyForm.bookId" autocomplete="off" disabled></el-input>
            </el-form-item>
            <el-form-item label="复本数量" :label-width="formLabelWidth">
                <el-input v-model="addCopyForm.quantity" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="submitAddCopyForm">确 定</el-button>
        </div>
    </el-dialog>

    <!-- 修改图书对话框 -->
    <el-dialog title="修改图书" :visible.sync="editDialogVisible">
        <el-form :model="editBookForm">
            <el-form-item label="图书ID" :label-width="formLabelWidth">
                <el-input v-model="editBookForm.id" autocomplete="off" disabled></el-input>
            </el-form-item>
            <el-form-item label="图书名" :label-width="formLabelWidth">
                <el-input v-model="editBookForm.title" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="作者" :label-width="formLabelWidth">
                <el-input v-model="editBookForm.author" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="分类" :label-width="formLabelWidth">
                <el-input v-model="editBookForm.category" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="ISBN" :label-width="formLabelWidth">
                <el-input v-model="editBookForm.isbn" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="出版日期" :label-width="formLabelWidth">
                <el-input v-model="editBookForm.publishedDate" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="editDialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="submitEditBookForm">确 定</el-button>
        </div>
    </el-dialog>

    <!-- 下架图书及复本对话框 -->
    <el-dialog title="下架图书及复本" :visible.sync="removeDialogVisible">
        <el-table :data="copies" style="width: 100%">
            <el-table-column prop="copyId" label="复本编号" width="180"></el-table-column>
            <el-table-column prop="name" label="借阅人" width="100"></el-table-column>
            <el-table-column prop="phone" label="电话号码" width="180"></el-table-column>
            <el-table-column prop="status" label="借阅状态" width="100"></el-table-column>
            <el-table-column label="操作" width="100">
                <template slot-scope="scope">
                    <el-button v-if="scope.row.status === '在馆'" @click="removeCopy(scope.row)" type="danger"
                               size="mini">下架
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <div slot="footer" class="dialog-footer">
            <el-button @click="removeDialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="confirmRemoveBook">下架该图书</el-button>
        </div>
    </el-dialog>
</div>

<!-- 引入Vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<!-- 引入Element UI -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<!-- 引入Axios -->
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

<script>
    new Vue({
        el: '#app',
        data() {
            return {
                searchForm: {
                    author: '',
                    category: '',
                    id: '',
                    isbn: '',
                    title: ''
                },
                books: [],
                currentPage: 1,
                pageSize: 10,
                total: 0,
                dialogVisible: false,
                addCopyForm: {
                    bookId: '',
                    quantity: ''
                },
                formLabelWidth: '120px',
                editDialogVisible: false,
                editBookForm: {
                    id: '',
                    title: '',
                    author: '',
                    category: '',
                    isbn: '',
                    publishedDate: ''
                },
                originalBookForm: {},
                removeDialogVisible: false,
                copies: [],
                selectedBookId: null,
                addBookDialogVisible: false,
                addBookForm: {
                    title: '',
                    author: '',
                    category: '',
                    isbn: '',
                    publishedDate: ''
                }
            };
        },
        methods: {
            onSearch() {
                this.fetchBooks();
            },
            fetchBooks() {
                const params = this.filterParams({
                    ...this.searchForm,
                    pageNo: this.currentPage,
                    pageSize: this.pageSize
                });
                axios.get('http://localhost:8091/books/page', {params})
                    .then(response => {
                        const data = response.data.data;
                        this.books = data.list;
                        this.total = data.total;
                    })
                    .catch(error => {
                        console.error('获取图书数据失败', error);
                        this.$message.error('获取图书数据失败');
                    });
            },
            filterParams(params) {
                return Object.keys(params).reduce((acc, key) => {
                    if (params[key] !== '' && params[key] !== null && params[key] !== undefined) {
                        acc[key] = params[key];
                    }
                    return acc;
                }, {});
            },
            handleSizeChange(val) {
                this.pageSize = val;
                this.fetchBooks();
            },
            handleCurrentChange(val) {
                this.currentPage = val;
                this.fetchBooks();
            },
            showAddCopyDialog(row) {
                this.addCopyForm.bookId = row.id;
                this.addCopyForm.quantity = '';
                this.dialogVisible = true;
            },
            submitAddCopyForm() {
                axios.post('http://localhost:8091/books/copies', this.addCopyForm)
                    .then(response => {
                        if (response.data.status === "200") {
                            this.$message.success('复本添加成功');
                            this.dialogVisible = false;
                            // 刷新图书列表
                            this.fetchBooks();
                        } else {
                            this.$message.error('复本添加失败');
                        }
                    })
                    .catch(error => {
                        console.error('复本添加失败', error);
                        this.$message.error('复本添加失败');
                    });
            },
            editBook(row) {
                axios.get(`http://localhost:8091/books/${row.id}`)
                    .then(response => {
                        const data = response.data.data;
                        this.originalBookForm = {
                            id: data.id,
                            title: data.title,
                            author: data.author,
                            category: data.category,
                            isbn: data.isbn,
                            publishedDate: data.publishedDate
                        };
                        this.editBookForm = {...this.originalBookForm};
                        this.editDialogVisible = true;
                    })
                    .catch(error => {
                        console.error('获取图书详细信息失败', error);
                        this.$message.error('获取图书详细信息失败');
                    });
            },
            submitEditBookForm() {
                const updatedFields = {};
                for (const key in this.editBookForm) {
                    if (this.editBookForm[key] !== this.originalBookForm[key]) {
                        updatedFields[key] = this.editBookForm[key];
                    }
                }
                if (Object.keys(updatedFields).length === 0) {
                    this.$message.warning('没有修改任何信息');
                    return;
                }
                updatedFields.id = this.editBookForm.id;
                axios.put('http://localhost:8091/books', updatedFields)
                    .then(response => {
                        if (response.data.status === "200") {
                            this.$message.success('图书修改成功');
                            this.editDialogVisible = false;
                            // 刷新图书列表
                            this.fetchBooks();
                        } else {
                            this.$message.error('图书修改失败');
                        }
                    })
                    .catch(error => {
                        console.error('图书修改失败', error);
                        this.$message.error('图书修改失败');
                    });
            },
            removeBook(row) {
                this.selectedBookId = row.id;
                axios.get(`http://localhost:8091/books/${row.id}`)
                    .then(response => {
                        const data = response.data.data;
                        this.copies = data.copies;
                        this.removeDialogVisible = true;
                    })
                    .catch(error => {
                        console.error('获取图书详细信息失败', error);
                        this.$message.error('获取图书详细信息失败');
                    });
            },
            removeCopy(copy) {
                axios.delete('http://localhost:8091/books/copies', {
                    params: {
                        copiesIds: copy.copyId.toString() // 将数组转换为逗号分隔的字符串
                    }
                })
                    .then(response => {
                        if (response.data.status === "200") {
                            this.$message.success('复本下架成功');
                            // 刷新复本信息
                            this.removeBook({id: this.selectedBookId});
                        } else {
                            this.$message.error('复本下架失败');
                        }
                    })
                    .catch(error => {
                        console.error('复本下架失败', error);
                        this.$message.error('复本下架失败');
                    });
            },
            confirmRemoveBook() {
                axios.delete('http://localhost:8091/books', {
                    params: {
                        bookIds: this.selectedBookId.toString()
                    }
                })
                    .then(response => {
                        if (response.data.status === "200") {
                            this.$message.success('图书下架成功');
                            this.removeDialogVisible = false;
                            // 刷新图书列表
                            this.fetchBooks();
                        } else {
                            this.$message.error(response.data.message);
                        }
                    })
                    .catch(error => {
                        console.error('图书下架失败', error);
                        this.$message.error('图书下架失败');
                    });
            },
            showAddBookDialog() {
                this.addBookForm = {
                    title: '',
                    author: '',
                    category: '',
                    isbn: '',
                    publishedDate: ''
                };
                this.addBookDialogVisible = true;
            },
            submitAddBookForm() {
                // 验证图书名、作者、分类、ISBN不为空
                if (!this.addBookForm.title || !this.addBookForm.author || !this.addBookForm.category || !this.addBookForm.isbn) {
                    this.$message.error('图书名、作者、分类、ISBN不能为空');
                    return;
                }

                axios.post('http://localhost:8091/books', this.addBookForm)
                    .then(response => {
                        if (response.data.status === "200") {
                            this.$message.success('图书添加成功');
                            this.addBookDialogVisible = false;
                            // 刷新图书列表
                            this.fetchBooks();
                        } else {
                            this.$message.error(response.data.message);
                        }
                    })
                    .catch(error => {
                        console.error('图书添加失败', error);
                        this.$message.error('图书添加失败');
                    });
            },
            showBorrowHistory() {
                // 这里可以添加浏览借阅记录的逻辑
                //设置延时再跳转
                setTimeout(() => {
                    window.location.href = '/user/borrow/records'; // 跳转到借阅记录页面
                }, 100); // 100毫秒后跳转
            }
        },
        created() {
            this.fetchBooks();
        }
    });
</script>
</body>
</html>
